<template>
	<view class="rank-page">
		<view class="app-log">
			<image style="width: 50px;height: 50px;" :src="item.appImage" radius="5" />
		</view>
		<view class="appName-time-percentage">
			<view class="name-time">
				<view class="name">{{ item.appName}}</view>
				<view class="time">{{formatDuration(item.useTime)}}</view>
			</view>
			<view class="percentage">
				<progress :percent="item.percentage" stroke-width="8"  :active="true" backgroundColor="#f5f9fa" activeColor="#2BC888"/>
			</view>
		</view>
		<view class="right">
			<!-- <icon type="/static/icon/arrow.png" style="width: 21px; height: 24px;" /> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		item:{
			type: Object,
			required: true
		}
	})
	function formatDuration(seconds) {  
		const hours = Math.floor(seconds / 3600); // 计算小时数  
		const remainingSeconds = seconds % 3600; // 计算剩余秒数（小于3600秒）  
		const minutes = Math.floor(remainingSeconds / 60); // 计算剩余分钟数  
		const remainingSecondsAfterMinutes = remainingSeconds % 60; // 计算剩余秒数（小于60秒）  
	  
		// 使用模板字符串返回格式化的时间  
		if (hours > 0) {  
			// 如果小时数大于0，则输出“X小时Y分钟Z秒”  
			return `${hours}小时${minutes}分钟${remainingSecondsAfterMinutes}秒`;  
		} else if (minutes > 0) {  
			// 如果小时数为0但分钟数大于0，则输出“Y分钟Z秒”  
			return `${minutes}分钟${remainingSecondsAfterMinutes}秒`;  
		} else {  
			// 如果小时数和分钟数都为0，则只输出秒数  
			return `${remainingSecondsAfterMinutes}秒`;  
		}  
	}   
	
	console.log('最后的节点', props.item)
</script>

<style scoped lang="scss">
	.rank-page{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 120upx;
		.app-log{
			width: 110upx;
			height: 80upx;
		}
		.appName-time-percentage{
			width:calc(100% - 110upx - 40upx);
			height: 100%;
			margin-left: 28upx;
			margin-right: 28upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.name-time{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					font-weight: 800;
					font-size: 28upx;
					color: #333333;
				}
				.time{
					font-weight: 400;
					font-size: 24upx;
					color: #999999;
				}
			}
			.percentage{
				
			}
		}
		.right{
			display: flex;
			justify-content: right;
			align-items: center;
			width:40upx;
			height: 100%;
		}
	}
</style>